<template>
  <CustomTableCard 
    temporary
    actions
    :width="1000"
    :showDrawer.sync="showDrawer" 
    @cancel="handleCancel"
    @ok="handleOk"
    :title="baseInfo.id ? $t('actions.edit') : $t('actions.add')">
    <div slot="header">
      <v-row>
        <v-col cols="12" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">{{ $t('actions.add') }}</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      v-loading="listLoading"
      v-auto-height
      :height="tableHeight"
      :data="deptList"
      stripe
      fit
      row-key="id"
      default-expand-all
      :tree-props="{children: 'childs', hasChildren: 'hasChildren'}"
      style="width: 100%;">
      <el-table-column
        prop="name"
        :label="$t('organization.deptModules.field.name')"
        width="360">
      </el-table-column>
      <el-table-column
        prop="name_en"
        :label="$t('organization.deptModules.field.nameEn')"
        width="360">
      </el-table-column>
      <el-table-column
        prop="parent"
        :label="$t('organization.deptModules.field.parent')">
        <template slot-scope="scope">
          <span>{{scope.row.parent ? scope.row.parent.name + ' / ' + scope.row.parent.name_en : '-'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('organization.deptModules.field.action')"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn class="mr-2" small color="primary" outlined @click="handleEdit(row)">{{ $t('actions.edit') }}</v-btn>
          <v-btn small color="warning" outlined @click="handleRmove(row)">{{ $t('actions.delete') }}</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <section slot="drawer" class="pa-3">
      <v-form
        ref="form"
        :lazy-validation="false"
      >
        <v-card class="mb-4">
          <v-card-text>
            <div class="d-flex pt-2">
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right pr-3"><small class="mr-1" style="color: red">({{$t('other.required')}})</small>{{ $t('organization.deptModules.field.name') }}</label>
                <v-text-field
                  v-model="baseInfo.name"
                  placeholder="请输入"
                  clearable
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </div>
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right pr-3"><small class="mr-1" style="color: red">({{$t('other.required')}})</small>{{ $t('organization.deptModules.field.nameEn') }}</label>
                <v-text-field
                  v-model="baseInfo.name_en"
                  placeholder="请输入"
                  clearable
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </div>
            </div>
            <div class="d-flex align-center px-3">
              <label style="width: 140px" class="text-right pr-3">{{ $t('organization.userModules.field.deptname') }}</label>
              <v-menu
                v-model="openMenu"
                :close-on-content-click="false"
                :nudge-width="200"
                :max-width="500"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field
                    v-model="parentname"
                    placeholder="请输入"
                    readonly
                    v-bind="attrs"
                    v-on="on"
                  ></v-text-field>
                </template>
                <v-card>
                  <v-card-text>
                    <v-text-field
                      v-model="filterText"
                      label="输入关键字进行过滤"
                      flat
                      hide-details
                      outlined
                      clearable
                      dense
                      clear-icon="mdi-close-circle-outline"
                      class="mb-2"
                    ></v-text-field>
                    <el-tree
                      :data="deptList"
                      :props="{
                        children: 'childs',
                        label: 'name'
                      }"
                      default-expand-all
                      :highlight-current="true"
                      :expand-on-click-node="false"
                      :filter-node-method="filterNode"
                      @node-click="handleSelectionDept"
                      ref="tree">
                    </el-tree>
                  </v-card-text>
                </v-card>
              </v-menu>
            </div>
            <div class="d-flex align-center px-3" style="color: #444;">
              <label style="width: 140px" class="text-right pr-3">tips</label>
              <span>上级部门为空则默认是顶级部门</span>
            </div>
          </v-card-text>
        </v-card>
      </v-form>
    </section>
  </CustomTableCard>
</template>

<script>
import { mapState } from 'vuex'
import { deleteDept, createDept, updateDept } from '@/api/organization'
import mixin from './mixin'

export default {
  name: 'department',
  mixins: [mixin],
  created() {
    this.getList()
    this.cloneFormData()
  },
  activated() {
    console.log('activated')
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  computed: {
    ...mapState('organization', ['deptList'])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      tableHeight: 500,
      showDrawer: false,
      openMenu: false,
      tableData: [{}],
      listLoading: false,

      parentname: '',
      baseInfo: {
        id: undefined,
        name: '',
        name_en: '',
        parent_id: undefined
      },

      filterText: '',

      rules: {
        required: value => !!value || 'required',
      }
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name ? data.name.indexOf(value) !== -1 : data.title.indexOf(value) !== -1;
    },
    handleSelectionDept(data) {
      this.baseInfo.parent_id = data.id
      this.parentname = data.name
      this.openMenu = false
    },
    // 克隆数据 用于重置数据使用
    cloneFormData() {
      this._baseInfo = Object.assign({}, this.baseInfo)
    },
    // 获取列表
    getList() {
      this.$store.dispatch('organization/getDeptList', {page: 1, limit: 500})
    },
    // 编辑列表
    handleEdit(row) {
      this.showDrawer = true
      Object.assign(this.baseInfo, row)
      this.parentname = row.parent && row.parent.name + '/' + row.parent.name_en
    },
    // 删除列表
    handleRmove(row) {
      this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
        center: true,
        type: 'warning'
      }).then(() => {
        deleteDept({id: [row.id]}).then(() => {
          this.$message.success('success')
          this.getList()
        })
      })
    },
    // 右侧窗口关闭事件
    handleCancel() {
      this.resetForm()
    },
    // 重置表达数据和验证
    resetForm () {
      Object.assign(this.baseInfo, this._baseInfo)
      this.parentname = ''
      this.$refs.form.resetValidation()
    },
    // 右侧窗口确定事件
    handleOk() {
      // console.log(this.baseInfo)
      if(this.$refs.form.validate()) {
        if(this.baseInfo.id) {
          updateDept(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList()
            this.showDrawer = false
          })
        } else {
          createDept(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList()
            this.showDrawer = false
          })
        }
      }
    }
  }
}
</script>
